<template>
	<view class="head-bg"></view>
	<view class="page-content">
		<!-- 页面标题 -->
		<view class="page-title">
			<view class="title">账号登录</view>
			<view class="subtitle">欢迎回来</view>
		</view>

		<!-- 登录表单卡片 -->
		<view class="login-card">
			<wd-form ref="formRef" :model="formData">
				<wd-cell-group border>
					<wd-input
						label="用户名"
						label-width="100px"
						prop="username"
						clearable
						v-model="formData.username"
						placeholder="请输入用户名"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<wd-input
						label="密码"
						label-width="100px"
						prop="password"
						show-password
						clearable
						v-model="formData.password"
						placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
				</wd-cell-group>
				<view class="footer">
					<wd-button type="primary" size="large" @click="handleSubmit" :loading="submitLoading" block>登录</wd-button>
					<view class="register-link">
						<text class="register-text">还没有账号？</text>
						<text class="register-action" @click="goToRegister">立即注册</text>
					</view>
				</view>
			</wd-form>
		</view>

		<!-- 用户协议入口 -->
		<view class="agreement-section">
			<view class="agreement-text">
				登录即表示同意
				<text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
				和
				<text class="agreement-link" @click="openUserAgreement">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useUserStore } from '@/store/user';
import { baseAPI } from '@/api/index.js';

const userStore = useUserStore();

const formData = reactive({
	username: '',
	password: ''
});

const formRef = ref();
const submitLoading = ref(false);

function handleSubmit() {
	formRef.value
		.validate()
		.then(({ valid }) => {
			if (valid) {
				submitLoading.value = true;
				baseAPI.post('auth/accountLogin', formData).then((res) => {
					submitLoading.value = false;
					if (res.code == 200) {
						userStore.login(res.result);
						// 跳转到首页
						uni.reLaunch({
							url: '/pages/my/index'
						});
					}
				});
			}
		})
		.catch((error) => {
			console.log('表单验证失败:', error);
		});
}

// 打开用户协议
function openUserAgreement() {
	uni.navigateTo({
		url: '/pages/agreement?id=1'
	});
}

// 跳转到注册页面
function goToRegister() {
	uni.navigateTo({
		url: '/pages/user/register'
	});
}
</script>

<style lang="scss" scoped>
.head-bg {
	width: 100%;
	height: 500rpx;
	position: absolute;
	background-image: linear-gradient(rgba($-color-theme, 0.5), #f5f5f5);
	z-index: 1;
}

.page-content {
	position: relative;
	z-index: 10;
	padding: 60rpx 30rpx 30rpx;
}

.page-title {
	text-align: center;
	margin-bottom: 80rpx;
	margin-top: 100rpx;

	.title {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.login-card {
	background-color: #fff;
	border-radius: $base-radius;
	padding: 60rpx 40rpx;
	margin-bottom: 40rpx;

	.footer {
		margin-top: 60rpx;
	}

	.register-link {
		text-align: center;
		margin-top: 30rpx;

		.register-text {
			font-size: 28rpx;
			color: #666;
		}

		.register-action {
			font-size: 28rpx;
			color: #1989fa;
			margin-left: 10rpx;
		}
	}
}

.agreement-section {
	text-align: center;
	padding: 30rpx 40rpx;

	.agreement-text {
		font-size: 24rpx;
		color: #999;
		line-height: 1.5;

		.agreement-link {
			color: #1989fa;
		}
	}
}
</style>
